<template>
	<view class="container">
		<!-- <ad unit-id="adunit-6b5b4dfadc9872dc"></ad> -->
		<view class="headertopboxs">
			<view class="statussumbox">
				<!-- <view v-if="orderinfo.type==1" class="mapbox">
					<map id="navi_map" :longitude="longitude" :latitude="latitude" scale="12" :markers="markers"
						:polyline="polyline"></map>
					<view @click="getOrderxq" class="shuaxin">刷新</view>
				</view> -->
				<!-- <image v-if="orderinfo.type==2" class="canvasimg" :src="imgsrc"></image> -->
				<!-- 								<canvas class="canvas" :style="{width:qrcodeWidth + 'px',height:qrcodeWidth + 'px'}"
					canvas-id='canvas'></canvas> -->
				<canvas id="qrcode" canvas-id="qrcode"
					style="width: 354px;height: 354px; position: fixed;top: -1000px;" />
				<view @click="feiyongshow = true" class="stazhuaitaibox">
					<text v-if="orderinfo.status=='-3'">退款成功</text>
					<text v-if="orderinfo.status=='-2'">申请退款</text>
					<text v-if="orderinfo.status=='-1'">取消已订单</text>
					<text v-if="orderinfo.status==0">待支付</text>
					<text v-if="orderinfo.type==1&&orderinfo.status==1">备货中</text>
					<!-- <text
						v-if="orderinfo.type==1&&orderinfo.status==2&&orderinfo.ccptOrderInfo.ccptOrderStatus==1">待骑士接单</text>
					<text
						v-if="orderinfo.type==1&&orderinfo.status==2&&orderinfo.ccptOrderInfo.ccptOrderStatus==2">骑士已接单</text>
					<text
						v-if="orderinfo.type==1&&orderinfo.status==2&&orderinfo.ccptOrderInfo.ccptOrderStatus==3">骑士配送中</text>
					<text v-if="orderinfo.type==1&&orderinfo.status==3">已完成</text>
					<text v-if="orderinfo.type==2&&orderinfo.status==1">未核销</text>
					<text v-if="orderinfo.type==2&&orderinfo.status==3">已核销</text>
					<image src="../../static/images/shopnew/shopyoujiantou.png"></image> -->
				</view>
				<view v-if="orderinfo.status==1" class="zttexts">感谢您的信任，正在为您准备商品... </view>
				<view v-if="orderinfo.status==3" class="zttexts"> 感谢您的信任，欢迎下次购买... </view>
				<view v-if="orderinfo.type==1&&orderinfo.status==2" class="zttexts"> 感谢您的信任，正在为您配送中...</view>
				<view class="anniubox">
					<!-- <view @click="lianxikefubtn(1)" class="sqanniu">联系商家</view> -->
					<view @click="zhifubtn" v-if="orderinfo.status==0" class="sqanniu">继续支付</view>
					<view @click="delo = true" v-if="orderinfo.status==0" class="sqanniu">取消订单</view>
					<view @click="shenqingquxiao = true" v-if="orderinfo.status==1||orderinfo.status==2"
						class="sqanniu">申请退款</view>
					<view @click="showconfirmGoodsTake = true" v-if="orderinfo.status==1||orderinfo.status==2"
						class="sqanniu">确定收货</view>
					<view @click="lianxikefubtn(2)"
						v-if="orderinfo.type==1&&orderinfo.status==2&&(orderinfo.ccptOrderInfo.ccptOrderStatus==3||orderinfo.ccptOrderInfo.ccptOrderStatus==2)"
						class="sqanniu">联系骑士 </view>
				</view>
			</view>
			<view class="xian10"></view>
		</view>
		<!-- 	<view @click="lianxikefubtn(1)" class="foothejibox">
			<image src="../../static/images/xiangqing_buda.png"></image>
			<text>联系商家</text>
		</view> -->
		<!-- 商店 -->
		<view class="shopduoxiangzi">
			<view class="shopname">
				<text class="name">{{orderinfo.shopName}}</text>
				<text v-if="orderinfo.type==1" class="paotui">曹操跑腿配送</text>
			</view>
			<view class="sumgoodsbox">
				<view v-for="(item,index) in orderinfo.orderLineList" :key="index" class="goodsitem">
					<image class="goodsimg" :src="item.picture"></image>
					<view class="infobox">
						<view class="nameandprice">
							<text class="goodsname">{{item.goodsName}}</text>
							<text class="goodsprice"
								v-if="((item.totalPrice/item.quantity).toFixed(2))>0">￥{{((item.totalPrice/item.quantity).toFixed(2))}}</text>
						</view>
						<view class="goodsnumn">
							<text>{{item.nameStr}}</text>
							<!-- <text v-if="item.nameStr">{{item.nameStr}}</text> -->
						</view>
						<view class="goodsnumn">
							<text>x{{item.quantity}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- <view v-if="orderinfo.orderPay.amount" class="baozhuangfei">
				<text>商品金额</text>
				<text class="pic2">￥{{orderinfo.orderPay.amount}}</text>
			</view> -->
			<view v-if="orderinfo.type==1" class="baozhuangfei">
				<text>配送费</text>
				<text class="pic2">￥{{orderinfo.orderPay.deliveryAmount}}</text>
			</view>
			<!-- <view v-if="orderinfo.orderPay.packAmount" class="baozhuangfei">
				<text>打包费</text>
				<text class="pic2">￥{{orderinfo.orderPay.packAmount}}</text>
			</view> -->
			<view v-for="item,index in orderinfo.orderPromoList" :key="index" class="baozhuangfei">
				<text>{{item.name}}</text>
				<text class="pic2">-￥{{item.discount}}</text>
			</view>
			<view class="youhuixiaoji" v-if="orderinfo.orderPay.payAmount>0">
				<text class="xiaojit">小计</text>
				<text class="pritexts">￥{{orderinfo.orderPay.payAmount}}</text>
			</view>
		</view>
		<view class="xian10"></view>
		<view class="orderxqinfo">
			<view class="xian2"></view>
			<view class="beizhubox">
				<view class="tit">配送时间</view>
				<view class="beizhiright">
					<view class="textbox">立即配送</view>
				</view>
			</view>
			<view class="beizhubox" v-if="orderinfo.orderDelivery.mobile">
				<view class="tit">地址信息</view>
				<view class="beizhiright">
					<view class="textbox">{{orderinfo.orderDelivery.name}} {{orderinfo.orderDelivery.mobile}}</view>
					<view v-if="orderinfo.type==1" class="textbox">
						{{orderinfo.orderDelivery.address}}
					</view>
				</view>
			</view>
			<view class="beizhubox" v-if="orderinfo.remark">
				<view class="tit">订单备注</view>
				<view class="beizhiright">
					<view class="textbox">{{orderinfo.remark}}</view>
				</view>
			</view>
		</view>
		<view class="xian10"></view>
		<view class="orderxqinfo">
			<view class="beizhubox">
				<view class="tit">订单号码</view>
				<view class="beizhiright">
					<view class="textbox">{{orderinfo.orderNo}}</view>
				</view>
			</view>
			<view class="beizhubox">
				<view class="tit">订单时间</view>
				<view class="beizhiright">
					<view class="textbox">{{orderinfo.createTime}}</view>
				</view>
			</view>
		</view>
		<view class="xian10"></view>
		<!-- <view @click="dial" class="foothejibox">
			<image src="../../static/images/xiangqing_buda.png"></image>
			<text>联系客服</text>
		</view> -->
		<view class="xian10"></view>
		<!-- 电话模态框 -->
		<u-modal :title="phonetit" @confirm="bodadianhua(bdphonenumb)" :mask-close-able="true" cancel-color="#999999"
			confirm-color="#ef5050" v-model:show="phoneshow" :content="bdphonenumb" :show-cancel-button="true">
		</u-modal>
		<!-- 订单状态步骤条 -->
		<u-popup v-model:show="feiyongshow" mode="bottom" border-radius="16">
			<view class="choosewupininfotit">
				<view class="wupininfotitleft">订单状态</view>
			</view>
			<view class="feiyongbox">
				<u-steps :list="steps" mode="dot" :current="0" direction="column"></u-steps>
			</view>
		</u-popup>
		<!-- 删除订单 -->
		<u-modal title="是否要取消订单" v-model:show="delo" @confirm="deldingdan()" :mask-close-able="true"
			cancel-color="#999999" confirm-color="#ef5050" content="请认真考虑一下哦~" :show-cancel-button="true">
		</u-modal>
		<!-- 申请取消订单 -->
		<u-modal title="是否要取消订单" v-model:show="shenqingquxiao" @confirm="shenqingtuikuan()" :mask-close-able="true"
			cancel-color="#999999" confirm-color="#ef5050" content="请认真考虑一下哦~" :show-cancel-button="true">
		</u-modal>
		<!-- 确定收货 -->
		<u-modal title="是否确定收货" v-model:show="showconfirmGoodsTake" @confirm="confirmGoodsTakeOk()"
			:mask-close-able="true" cancel-color="#999999" confirm-color="#ef5050" content="请认真考虑一下哦~"
			:show-cancel-button="true">
		</u-modal>
	</view>
	<!-- 	<view>
	</view> -->
	<!-- 订单状态 -->
	<!-- 	<van-popup show="{{ feiyongshow }}" custom-style="border-top-left-radius: 16rpx;border-top-right-radius: 16rpx;"
		position="bottom" bind:close="feiyongonClose">
		<view class="choosewupininfotit">
			<view class="wupininfotitleft">订单状态</view>
		</view>
		<view class="feiyongbox">
			<van-steps steps="{{ steps }}" active="{{ active }}" direction="vertical" active-color="#FD2266" />
		</view>
	</van-popup> -->
</template>
<script>
	// import uQRCode from '@/components/uqrcode/common/uqrcode.js'
	// var amapFile = require('../../request/amap-wx.js');
	// var myAmapFun = new amapFile.AMapWX({
	// 	key: '0448b76ff3028ffd56b37dfa8fd735d3',
	// });
	import {
		selectOrderInfo, //详情
		getOrderStatusInfo, //状态变化
		cancelOrder,
		refundOrder,
		confirmGoodsTake,
		orderPay
	} from "../../request/api.js"
	export default {
		data() {
			return {
				showconfirmGoodsTake: false,
				navHeight: '',
				quimg: '../../static/images/184-4-11-4.jpg', //24 32
				songimg: '../../static/images/185-4-11-1.jpg',
				staffimg: '../../static/images/6053-4-16-1.jpg',
				kefuphone: '0371-53366775',
				// qrcodeWidth: qrcodeWidth,
				imgsrc: '', //二维码图片
				goodslist: [1, 2, 3, 4, 5],
				orderid: '',
				uid: '',
				openid: '',
				orderinfo: {
					orderPay: {
						payAmount: 0
					}
				},
				feiyongshow: false,
				steps: [],
				markers: [],
				longitude: '',
				latitude: '',
				polyline: [],
				quxiaoshow: false,
				// 电话模态框
				phoneshow: false,
				phonetit: '',
				bdphonenumb: '',
				// 删除订单
				delo: false, //未付款 删除订单
				// 申请取消
				shenqingquxiao: false,
			}
		},
		onLoad(options) {
			let that = this
			console.log(options)
			that.uid = getApp().globalData.uid
			that.openid = getApp().globalData.openid
			that.orderid = options.ordernum
		},
		onShow() {
			let that = this
			that.getOrderxq()
			that.getOrderStatus()
		},
		methods: {
			dial() {
				plus.share.getServices(res => {
					const wechat = res.find(i => i.id === 'weixin')
					if (wechat) {
						wechat.openCustomerServiceChat({
							corpid: "wwa4109901095808d2", //第三步获取
							url: "https://work.weixin.qq.com/kfid/kfcec94590fae8480a4"
						}, src => {
							console.log("success:")
						}, err => {
							console.log("error:")
						})
					} else {
						uni.showToast({
							title: '当前环境不支持',
							icon: "error"
						});
					}
				});
			},
			open() {
				this.delo = true;
			},
			zhifubtn() {
				let that = this
				uni.showLoading({
					title: '加载中',
				})
				// if (that.dianjiflag) {
				// 	that.dianjiflag = false
				// } else {
				// 	return
				// }
				orderPay({
					orderId: that.orderid,
					payMoney: this.orderinfo.orderPay.payAmount,
					payType: "W02",
					// openId: that.openid,
					type: 0,
				}).then(responts => {
					setTimeout(function() {
						uni.hideLoading()
					})
					console.log(responts, '凄凄切切')
					setTimeout(function() {
						if (responts.success) {
							let ressuccess = JSON.parse(responts.result)
							console.log(ressuccess);
							uni.requestPayment({
								"provider": "wxpay",
								"orderInfo": {
									"appid": ressuccess.appid, // 微信开放平台 - 
									"noncestr": ressuccess.noncestr, // 随机字符串
									"package": ressuccess.package, // 固定值
									"partnerid": ressuccess.partnerid, // 微信支付商户号
									"prepayid": ressuccess.prepayid, // 统一下单订单号
									"timestamp": ressuccess.timestamp, // 时间戳（单位：秒）
									"sign": ressuccess.sign // 签名，这里用的 MD5/RSA 签名
								},
								'success': function(res) {
									console.log(res)
									uni.showModal({
										title: '提示',
										content: "支付成功！",
										showCancel: false,
										success: function(res) {
											if (that.type == 2) {
												uni.navigateBack()
											} else {
												uni.redirectTo({
													url: '/pages/my/orderdetails?ordernum=' +
														that.orderdetails
														.id,
												})
											}
										}
									})
								},
								'fail': function(res) {
									console.log(res, '失败原因')
									uni.showModal({
										title: '提示',
										content: "支付失败！",
										showCancel: false,
										success: function(res) {
											if (that.type == 2) {
												uni.navigateBack()
											} else {
												uni.redirectTo({
													url: '/pages/my/orderdetails?ordernum=' +
														that.orderdetails
														.id,
												})
											}
											that.dianjiflag = true
										}
									})
								}
							})
						} else {
							console.log("错误")
							uni.showToast({
								title: responts.message,
								icon: 'none'
							})
							that.dianjiflag = true
						}
					})
				}).catch(error => {
					setTimeout(function() {
						uni.hideLoading()
					})
					that.dianjiflag = true
				})
			},
			quzhifu() {
				uni.navigateTo({
					url: '../xiadanpay/index?orderid=' + this.orderid + '&orderno=' + this.orderinfo.orderNo +
						'&money=' + this.orderinfo.orderPay.payAmount + '&type=2'
				})
			},
			confirmGoodsTakeOk() {
				confirmGoodsTake(this.orderid).then(res => {
					console.log(res);
					uni.showToast({
						title: res.result,
						icon: 'none'
					})
					if (res.success) {
						this.showconfirmGoodsTake = false
						this.getOrderxq()
						this.getOrderStatus()
					}
				})
			},
			// 申请取消订单
			shenqingtuikuan() {
				let that = this
				uni.showLoading({
					title: '加载中',
				})
				refundOrder({
					orderNo: that.orderinfo.orderNo,
					openid: '0',
				}).then(responts => {
					console.log(responts)
					if (responts.success) {
						setTimeout(function() {
							uni.hideLoading()
						})
						that.getOrderxq()
						that.getOrderStatus()
					} else {
						setTimeout(function() {
							uni.hideLoading()
						})
						setTimeout(function() {
							uni.showToast({
								title: responts.message,
								icon: 'none'
							})
						})
					}
				}).catch(error => {
					setTimeout(function() {
						console.log(error)
						uni.hideLoading()
					})
				})
			},
			//  未付款  删除订单
			deldingdan() {
				let that = this
				uni.showLoading({
					title: '加载中',
				})
				cancelOrder({
					orderId: that.orderid
				}).then(responts => {
					if (responts.success) {
						setTimeout(function() {
							uni.hideLoading()
						})
						that.getOrderxq()
						that.getOrderStatus()
					} else {
						setTimeout(function() {
							uni.hideLoading()
						})
						setTimeout(function() {
							uni.showToast({
								title: responts.message,
								icon: 'none'
							})
						})
					}
				}).catch(error => {
					setTimeout(function() {
						console.log(error)
						uni.hideLoading()
					})
				})
			},
			// 送货地图
			initmap() {
				let that = this
				let orderinfo = that.orderinfo
				that.markers = []
				var marklist = [{
					iconPath: that.quimg,
					id: 0,
					latitude: orderinfo.lat,
					longitude: orderinfo.lng,
					width: 24,
					height: 32
				}, {
					iconPath: that.songimg,
					id: 0,
					latitude: orderinfo.orderDelivery.lat,
					longitude: orderinfo.orderDelivery.lng,
					width: 24,
					height: 32
				}]
				if (orderinfo.ccptOrderInfo) {
					if (orderinfo.ccptOrderInfo.ccptStaffLat && orderinfo.ccptOrderInfo.ccptStaffLng) {
						marklist.push({
							iconPath: that.staffimg,
							id: 0,
							latitude: orderinfo.ccptOrderInfo.ccptStaffLat * 1,
							longitude: orderinfo.ccptOrderInfo.ccptStaffLng * 1,
							width: 33,
							height: 32
						})
					}
				}
				that.markers = marklist
				myAmapFun.getRidingRoute({
					origin: orderinfo.lng + ',' + orderinfo.lat, //发
					destination: orderinfo.orderDelivery.lng + ',' + orderinfo.orderDelivery.lat, //收
					success: function(data) {
						console.log(data, '路线')
						var points = [];
						if (data.paths && data.paths[0] && data.paths[0].steps) {
							var steps = data.paths[0].steps;
							for (var i = 0; i < steps.length; i++) {
								var poLen = steps[i].polyline.split(';');
								for (var j = 0; j < poLen.length; j++) {
									points.push({
										longitude: parseFloat(poLen[j].split(',')[0]),
										latitude: parseFloat(poLen[j].split(',')[1])
									})
								}
							}
						}
						that.polyline = [{
							points: points,
							color: "#0091ff",
							width: 6
						}]
						if (data.paths[0] && data.paths[0].distance) {
							that.distance = data.paths[0].distance + '米'
						}
						if (data.taxi_cost) {
							that.cost = '打车约' + parseInt(data.taxi_cost) + '元'
						}
					},
					fail: function(info) {}
				})
			},
			// 拨打电话
			bodadianhua(phone) {
				console.log(phone);
				if (phone) {
					uni.makePhoneCall({
						phoneNumber: phone
					})
				}
			},
			// 拨打电话模态框
			lianxikefubtn(num) {
				if (num == 1) {
					this.phonetit = '即将拨打商家电话'
					this.bdphonenumb = this.orderinfo.servicePhone
				} else if (num == 2) {
					this.phonetit = '即将拨打骑士电话'
					this.bdphonenumb = this.orderinfo.ccptOrderInfo.ccptStaffMobile
				} else if (num == 3) {
					if (this.orderinfo.sitePhone) {
						this.phonetit = '即将拨打客服电话'
						this.bdphonenumb = this.orderinfo.sitePhone
					} else {
						this.phonetit = '该区域暂无客服，请拨打商家电话'
						this.bdphonenumb = null
					}
				}
				this.phoneshow = true
			},
			// 获取取货码
			getcode() {
				let that = this
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					size: 354,
					margin: 10,
					text: that.orderinfo.verifyCode,
					backgroundColor: '#ffffff',
					foregroundColor: '#000',
					fileType: 'png',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H
				}).then(res => {
					console.log(res)
					that.imgsrc = res.tempFilePath
				})
			},
			getOrderStatus() {
				let that = this
				getOrderStatusInfo({
					orderId: that.orderid
				}).then(responts => {
					console.log(responts)
					if (responts.success) {
						let obj = []
						responts.result.forEach(item => {
							obj.unshift({
								name: item.orderStatusName + ' ' + item.createTime
							})
						})
						that.steps = obj
					} else {
						setTimeout(function() {
							uni.showToast({
								title: '获取订单状态：' + responts.message,
								icon: 'none'
							})
						})
					}
				}).catch(error => {
					setTimeout(function() {
						console.log(error)
					})
				})
			},
			//获取订单列表
			getOrderxq() {
				let that = this
				uni.showLoading({
					title: '加载中',
				})
				selectOrderInfo({
					id: that.orderid
				}).then(responts => {
					console.log(responts, "订单信息")
					if (responts.success) {
						setTimeout(function() {
							uni.hideLoading()
						})
						// var steps = []
						// for (var i = 0; i < responts.data.shopStatus.length; i++) {
						// 	let items = responts.data.shopStatus[i]
						// 	steps.push({
						// 		name: items.name + (items.remark ? (':' + items.remark) : ' ') + (items
						// 			.time ? items.time : '')
						// 	})
						// }
						// that.steps = steps
						// let quxiaoshow = true
						// if (!responts.data.orderSendTime) {
						// 	quxiaoshow = false
						// } else {
						// 	var orderSendTime = Date.parse(new Date(responts.data.orderSendTime));
						// 	var dangqiantimes = Date.parse(new Date());
						// 	let chuonum = (dangqiantimes - orderSendTime) / 1000
						// 	console.log(chuonum)
						// 	if (chuonum > 604800) {
						// 		quxiaoshow = false
						// 	} else {
						// 		quxiaoshow = true
						// 	}
						// }
						// that.quxiaoshow = quxiaoshow
						that.orderinfo = responts.result
						if (responts.result.type == 2) {
							that.getcode()
						} else {
							let lat = '',
								lng = ''
							if (responts.result.orderDelivery.lat && responts.result.lat) {
								lat = (responts.result.orderDelivery.lat * 1 + responts.result.lat * 1) / 2
								lng = (responts.result.orderDelivery.lng * 1 + responts.result.lng * 1) / 2
							} else {
								lat = responts.result.lat * 1
								lng = responts.result.lng * 1
							}
							that.latitude = lat
							that.longitude = lng
							that.initmap()
						}
					} else {
						setTimeout(function() {
							uni.hideLoading()
						})
						setTimeout(function() {
							uni.showToast({
								title: '获取订单详情：' + responts.message,
								icon: 'none'
							})
						})
					}
				}).catch(error => {
					setTimeout(function() {
						console.log(error)
						uni.hideLoading()
					})
				})
			},
			//  获取骑士的相关信息
			getknightinfo() {
				// uni.request({
				// 	url: 'http://api.ccpt.xyz:9001/api/order/getorderinfo',
				// 	method: 'post',
				// 	data: {
				// 		membersid: 150917,
				// 		ordersid: "5049931"
				// 	},
				// 	success(res) {
				// 		console.log(res)
				// 	}
				// })
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		width: 100%;

		/* 间隔线 */
		.xian10 {
			background-color: #eee;
			height: 10rpx;
			width: 100%;
		}

		.xian2 {
			width: 100%;
			height: 1rpx;
		}

		.headertopboxs {
			width: 100%;
			background-color: #fff;

			.statussumbox {
				width: 100%;
				box-sizing: border-box;
				padding: 22rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				/* 地图 */
				.mapbox {
					width: 100%;
					height: 500rpx;
					position: relative;
					margin-bottom: 10rpx;
				}

				#navi_map {
					width: 100%;
					height: 100%;
				}

				.shuaxin {
					position: absolute;
					bottom: 20rpx;
					right: 20rpx;
					width: 90rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					color: #333;
					font-size: 24rpx;
					background-color: #fff;
				}

				.canvasimg {
					width: 344rpx;
					height: 344rpx;
					margin-bottom: 10rpx;
				}

				.stazhuaitaibox {
					display: flex;
					align-items: center;
					font-size: 32rpx;
					color: #ef5050;
					margin-bottom: 10rpx;

					&>image {
						width: 20rpx;
						height: 20rpx;
						padding: 10rpx;
						margin-left: 18rpx;
					}
				}

				.zttexts {
					font-size: 22rpx;
					color: #999999;
					margin-bottom: 10rpx;
				}

				.anniubox {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 10rpx;

					.sqanniu {
						width: 168rpx;
						height: 56rpx;
						background: #FFFFFF;
						border: 2rpx solid #999999;
						border-radius: 6rpx;
						line-height: 56rpx;
						text-align: center;
						font-size: 22rpx;
						color: #333333;
						margin: 0 16rpx;
					}
				}
			}
		}

		/* 店铺 */
		.shopduoxiangzi {
			background-color: #fff;
			box-sizing: border-box;
			padding: 0 28rpx;

			.shopname {
				width: 100%;
				height: 84rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.name {
					font-size: 32rpx;
					color: #333333;
				}

				.paotui {
					font-size: 28rpx;
					color: #999;
				}
			}

			.sumgoodsbox {
				width: 100%;

				.goodsitem {
					width: 100%;
					height: 140rpx;
					box-sizing: border-box;
					padding: 0 14rpx;
					display: flex;
					align-items: center;
					background-color: #eee;
					margin-bottom: 12rpx;

					.goodsimg {
						width: 112rpx;
						height: 112rpx;
						margin-right: 16rpx;
					}

					.infobox {
						height: 112rpx;
						width: 536rpx;

						.nameandprice {
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 28rpx;
							color: #333333;
						}

						.goodsnumn {
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 28rpx;
							color: #999999;
							margin-top: 4rpx;
						}
					}
				}
			}

			/* 配送费  包装费 */
			.baozhuangfei {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				color: #333333;
				padding-bottom: 20rpx;

				.pic2 {
					color: #ef5050;
				}
			}

			.youhuixiaoji {
				border-top: 2rpx solid #eee;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.yhtext {
					font-size: 28rpx;
					color: #999999;
					margin-right: 18rpx;
				}

				.xiaojit {
					font-size: 32rpx;
					color: #333333;
				}

				.pritexts {
					font-size: 32rpx;
					color: #ef5050;
				}
			}
		}

		/* 备注 */
		.orderxqinfo {
			width: 100%;
			box-sizing: border-box;
			padding: 28rpx 28rpx 2rpx 28rpx;
			background-color: #fff;

			.beizhubox {
				width: 100%;
				display: flex;
				margin-bottom: 20rpx;

				.tit {
					font-size: 28rpx;
					color: #999999;
					margin-right: 30rpx;
				}

				.beizhiright {
					flex: 1;
					font-size: 28rpx;
					color: #333333;
					line-height: 44rpx;

					.textbox {
						width: 100%;
					}
				}
			}
		}

		/* 底部合计 */
		.foothejibox {
			width: 100%;
			height: 84rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #333333;

			&>image {
				width: 50rpx;
				height: 50rpx;
				margin-right: 6rpx;
			}
		}

		/* 选择物品弹出层 */
		.choosewupininfotit {
			width: 100%;
			margin-top: 28rpx;
			margin-bottom: 46rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			/* 标题 */
			.wupininfotitleft {
				font-size: 32rpx;
				color: #333333;
				margin-left: 28rpx;
			}

			/* 关闭按钮 */
			&>image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 28rpx;
			}
		}

		/* 。费用明细 */
		.feiyongbox {
			width: 100%;
			box-sizing: border-box;
			padding: 0 28rpx;
			padding-bottom: 50rpx;
		}
	}
</style>